<template>
	<view>
		<!-- 自定义卡片轮播 -->
		<view class="container">
			<swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="500" :current="currentSwiper"
				@change="changeSwiper" circular>
				<swiper-item v-for="(item, index) in bannerList" :key="item.id">
					<view class="swiper-item">
						<image class="fullscreen-image" mode="aspectFill" :src="item.url" />
						<!-- 第三张图专属按钮 -->
						<view v-if="item.id === 3" class='action-btn-wrap'>
							<button class="action-btn" @click="handleBtnClick">
								立即体验
							</button>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<!-- 自定义指示器 -->
			<view class="custom-dots" :class="{ 'dots-hidden': currentSwiper === 2 }">
				<view v-for="(item, index) in bannerList" :key="index" class="dot"
					:class="{ 'dot-active': currentSwiper === index }"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		ImgBaseUrl
	} from '@/utils/domain.js'

	// 轮播图数据
	const bannerList = ref([{
			url: `${ImgBaseUrl}/guidePage-banner1.png`,
			id: 1
		},
		{
			url: `${ImgBaseUrl}/guide-banner2.png`,
			id: 2
		},
		{
			url: `${ImgBaseUrl}/guidePage-banner3.png`,
			id: 3
		}
	])

	// 当前轮播索引
	const currentSwiper = ref(0)

	// 轮播切换事件
	const changeSwiper = (e) => {
		currentSwiper.value = e.detail.current
	}

	// 按钮点击事件
	const handleBtnClick = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.swiper-box {
		width: 100%;
		height: 100vh;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.fullscreen-image {
		width: 100%;
		height: 100%;
		display: block;
	}

	// 自定义指示器样式
	.custom-dots {
		position: absolute;
		bottom: 170rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		transition: opacity 0.3s ease;

		&.dots-hidden {
			opacity: 0;
			visibility: hidden;
		}

		.dot {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: rgba(47, 128, 237, 0.36);
			margin: 0 8rpx;
			transition: all 0.3s ease;

			&.dot-active {
				width: 65rpx;
				border-radius: 5rpx;
				background-color: rgba(47, 128, 237, 1);
			}
		}
	}

	// 按钮容器，固定在轮播图底部中间
	.action-btn-wrap {
		width: 268rpx;
		height: 88rpx;
		position: absolute;
		bottom: 135rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 11;
	}

	// 按钮样式
	.action-btn {
		width: 100%;
		height: 100%;
		background: #2F80ED;
		color: #fff;
		font-size: 34rpx;
		border-radius: 48rpx;
		font-weight: 500;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>